<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/animate.css">
    <link rel="stylesheet" href="../static/lib/prism/prism.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini" >
    <div class="ui container">
        <!--stackable-->
        <div class="ui inverted  secondary stackable menu">
            <h2 class="ui header teal item">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon input transparent inverted">
                    <input type="text" placeholder="Search...">
                    <i class="search icon link"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui black icon button m-right-top m-mobile-show menu toggle" >
        <i class="sidebar icon"></i>
    </a>
</nav>

    <!--中间内容-->
    <div id="waypoint" class="m-container-small m-padded-tb-large animated fadeIn">
       <div class="ui container">
           <!--头部-->
           <div class="ui centered aligned top attached segment">
               <div class="ui  horizontal link list">
                   <div class="item">
                       <img src="../static/images/k4.jpg" alt="" class="ui avatar image">
                       <div class="content"><a href="#" class="header">李强</a></div>
                   </div>
                   <div class="item">
                       <i class="calendar icon"></i> 2017-10-01
                   </div>
                   <div class="item">
                       <i class="eye icon"></i> 2342
                   </div>
               </div>
           </div>
           <!--图片区域-->
           <div class="ui attached segment">
               <img src="../static/images/k4.jpg" alt="" class="ui fluid rounded image">
           </div>

           <!--内容-->
           <div class="ui attached segment padded">
               <div class="ui right aligned basic segment">
                   <div class="ui orange basic label ">原创</div>
               </div>

               <h2 class="ui center aligned header">中国科学院软件研究所简介 </h2>
                <br>
               <div id="content" class="typo typo-selection js-toc-content m-padded-lr-responsive m-margin-tb-large">
                   <h2 id="section1">一、关于 <i class="serif">Typo.css</i></h2>
                    <pre><code class="language-css">p{color:red}</code></pre>
                   <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。</p>
                   <h4>现状和如何去做：</h4>

                   <h3 id="section3">三、附录</h3>

                   <h5 id="appendix1">1、<i class="serif">Typo.css</i> 排版偏重点</h5>

                   <h5 id="appendix2">2、开源许可</h5>

               </div>

               <!--标签-->
               <div class="m-padded-lr-responsive">
                   <div class="ui basic teal left pointing label">方法论</div>
               </div>

               <!--赞赏-->
               <div class="ui center aligned basic segment">
                   <button id="payButton" class="ui orange basic circular button">赞赏</button>
               </div>

               <div class="ui payQ flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size:inherit !important;">
                            <div class="image">
                                <img src="../static/images/wechat.png" alt="" class="ui rounded borderd image" style="width:120px;">
                                <div>支付宝支付</div>
                            </div>
                            <div class="image">
                                <img src="../static/images/wechat.png" alt="" class="ui rounded borderd image" style="width:120px;">
                                <div>微信支付</div>
                            </div>
                        </div>
                    </div>
                </div>

           </div>
           <!--博客信息-->
           <div class="ui attached positive message">
               <div class="ui middle aligned grid">
                   <div class="eleven wide column">
                       <ui class="list" style="list-style:none">
                           <li>作者：李强 (联系作者)</li>
                           <li>发表时间：2019-12-12</li>
                           <li>版权声明：自由转载-非商用-非衍生-保持署名 (创意共享3.0许可证)</li>
                       </ui>
                   </div>
                   <div class="five wide column">
                       <img src="../static/images/wechat.png" alt="" class="ui rounded right floated borderd image" style="width:110px;">
                   </div>
               </div>
           </div>
           <!--留言区域-->
           <div id="comment-container" class="ui bottom attached segment">
               <div class="ui teal basic segment">
                   <div class="ui comments">
                       <h3 class="ui dividing header">Comments</h3>
                       <div class="comment">
                           <a class="avatar">
                               <img src="../static/images/k4.jpg">
                           </a>
                           <div class="content">
                               <a class="author">Matt</a>
                               <div class="metadata">
                                   <span class="date">Today at 5:42PM</span>
                               </div>
                               <div class="text">
                                   How artistic!
                               </div>
                               <div class="actions">
                                   <a class="reply">回复</a>
                               </div>
                           </div>
                       </div>
                       <div class="comment">
                           <a class="avatar">
                               <img src="../static/images/k4.jpg">
                           </a>
                           <div class="content">
                               <a class="author">Elliot Fu</a>
                               <div class="metadata">
                                   <span class="date">Yesterday at 12:30AM</span>
                               </div>
                               <div class="text">
                                   <p>This has been very useful for my research. Thanks as well!</p>
                               </div>
                               <div class="actions">
                                   <a class="reply">回复</a>
                               </div>
                           </div>
                           <div class="comments">
                               <div class="comment">
                                   <a class="avatar">
                                       <img src="../static/images/k4.jpg">
                                   </a>
                                   <div class="content">
                                       <a class="author">Jenny Hess</a>
                                       <div class="metadata">
                                           <span class="date">Just now</span>
                                       </div>
                                       <div class="text">
                                           Elliot you are always so right :)
                                       </div>
                                       <div class="actions">
                                           <a class="reply">回复</a>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </div>

                   <div class="ui form">
                       <div class="field">
                           <textarea name="content" placeholder="请输入评论信息..."></textarea>
                       </div>
                       <div class="fields">
                           <div class="field m-mobile-wide-field m-margin-bottom-small">
                               <div class="ui left icon input">
                                   <i class="user icon"></i>
                                   <input type="text" placeholder="姓名" name="nickname">
                               </div>
                           </div>
                           <div class="field m-mobile-wide-field m-margin-bottom-small">
                               <div class="ui left icon input">
                                   <i class="mail icon"></i>
                                   <input type="text" placeholder="邮箱" name="email">
                               </div>
                           </div>

                           <div class="field m-mobile-wide-field m-margin-bottom-small">
                               <button class="ui teal button m-mobile-wide-field "><i class="edit icon"></i>发布</button>
                           </div>

                       </div>
                   </div>
               </div>

           </div>
       </div>
    </div>

    <!--浮动栏-->
    <div id="toolbar" class="m-fixed m-right-bottom m-padded" style="display:none;">
        <div class="ui vertical icon buttons">
            <button type="button" class="ui toc teal button">目录</button>
            <a href="#comment-container" class="ui  teal button">留言</a>
            <button class="ui wechat icon button"><i class="weixin icon"></i></button>
            <button type="button" id="toTop" class="ui button"><i class="chevron up icon"></i></button>
        </div>
    </div>

    <!--目录-->
    <div class="ui toc-container flowing popup transition hidden" style="width:250px;">
        <ol class="js-toc">

        </ol>
    </div>

    <!--二维码-->
    <div id="qrcode" class="ui wechat-qr flowing popup transition hidden" style="width:130px !important;">
        <!--<img src="./static/images/wechat.png" alt="" class="ui rounded image" style="width: 120px !important;">-->
    </div>

    <!--底部-->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <!--在这个框架中，网格为16格-->
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/images/wechat.png" class="ui rounded image" alt="" style="width:10em;">
                        </div>
                    </div>

                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事 (User story)</a>
                        <a href="#" class="item">用户故事 (User story)</a>
                        <a href="#" class="item">用户故事 (User story)</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini">联系我们</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email: 1793521005@qq.com</a>
                        <a href="#" class="item">QQ: 1793521005</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced m-opacity-mini">Blog</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、用于分享编程、思考、理财相关的任何内容，希望可以给来到这里的人有所帮助</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2019-2020 Windsearcher Designed by liqiang</p>
        </div>
    </footer>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="../static/lib/prism/prism.js"></script>
<script src="../static/lib/tocbot/tocbot.min.js"></script>
<script src="../static/lib/qrcode/qrcode.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>

<script>

    $('.menu.toggle').click(function(){
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#payButton').popup({
        popup:$('.payQ.popup'),
        on:'click',
        position:'bottom center'
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });

    $('.toc.button').popup({
        popup:$('.toc-container.popup'),
        on:'click',
        position:'left center'
    });


    $('.wechat').popup({
        popup : $('.wechat-qr.popup'),
        position: 'left center'
    });

    var qrcode = new QRCode("qrcode", {
        text: "http://jindo.dev.naver.com/collie",
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });


    $('#toTop').click(function(){
        $(window).scrollTo(0,500);
    });

    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if(direction == 'down'){
                $('#toolbar').show();
            }else{
                $('#toolbar').hide(500);
            }
            console.log('Scrolled to waypoint!')
        }
    })
</script>
</body>
</html>















